<!-- todo: 添加响应式 -->
<!--这是物料渲染器-->
<template>
  <div>
    <component :is="material" :material="materialType"></component>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';

import TextMaterial from "@/material/common/TextMaterial.vue"
import ButtonMaterial from "@/material/common/ButtonMaterial.vue";
import IconMaterial from "@/material/common/IconMaterial.vue";
import InputMaterial from "@/material/form/InputMaterial.vue";
import FallbackMaterial from "@/material/base/FallbackMaterial.vue";
import GridMaterial from "@/material/container/GridMaterial.vue";
import BaseContainerMaterial from "@/material/container/BaseContainerMaterial.vue";
import BaseTableMaterial from "@/material/table/BaseTableMaterial.vue";
import TextareaMaterial from "@/material/form/TextareaMaterial.vue";

import {MaterialType} from "@/data-type/material.type";

// 使用 defineProps 来解构并定义你期望从父组件接收的属性
const {materialType} = defineProps<{materialType: MaterialType}>();
let material:any =  computed(()=>{
  let material:any;
  // 物料的插件化就不用写switch了，因为是基于插件化协议的数据
  switch (materialType.type) {
    case 'text':
      material = TextMaterial;
      break;
    case 'textarea':
      material = TextareaMaterial;
      break;
    case 'button':
      material = ButtonMaterial;
      break;
    case 'icon':
      material = IconMaterial;
      break;
    case 'input':
      material = InputMaterial;
      break;
    case 'grid':
      material = GridMaterial;
      break;
    case 'baseTable':
      material = BaseTableMaterial;
      break;
    case 'baseContainer':
      material = BaseContainerMaterial;
      break;
    default:
      material = FallbackMaterial;
      break;
  }
  return material;
});
</script>

<style scoped>
</style>
